<template>
  <div class="app-container">
    <el-row type="flex" justify="center">
      <el-col :span="20" style="text-align: center">
        <el-input v-model="searchValue" style="margin-top: 100px; width: 550px; height: 45px;"></el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <div v-for="item in knowledgeList" style="margin-top: 30px">
          <el-link type="primary" :href="item.url" target="_blank" style="font-size: 22px">{{item.title}}</el-link>
<!--          <div style="margin-top: 20px">-->
<!--            <span class="c-color-gray2">{{item.createTime}}</span>-->
<!--            <span class="content-right_2s-H4">-->
<!--              <div v-html="cutout(item.content)"></div>-->
<!--            </span>-->
<!--          </div>-->
        </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import knowledge from '@/views/knowledge/index.vue'
import { searchKnowledgeList } from '@/api/knowledge/knowledge'

export default {
  name: 'search',
  computed: {
    shortContent(){

    }
  },
  data() {
    return {
      searchValue: '',
      knowledgeList: []
    }
  },
  methods: {
    handleSearch() {
      searchKnowledgeList(this.searchValue).then(response=>{
        this.knowledgeList = response.rows
      })
    },
    // 截取数据
    cutout(content) {


      return content.replace(/\,/g, '</br>')
    }
  }
}
</script>

<style>
.c-color-gray2{
  color: #9195A3;
  margin-top: 20px;
}
.content-right_2s-H4{
  word-break: break-all;
}
.c-title{
  font-weight: 400;
  font-size: 16px;
}
</style>
